// 导入创建路由的函数
import { createRouter, createWebHashHistory } from "vue-router";
// 1. 定义路由组件.
// 提前导入 直接挂载到对应路由
import Home from "../views/Home.vue";

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  // 提前导入组件的写法
  { path: "/", component: Home },
  // 访问对应路径的时候才导入组件的懒加载方式
  {
    path: "/passvalue",
    component: () => import("../views/PassValue.vue"),
  },
  { path: "/mock", component: () => import("../views/Mock.vue") },
  { path: "/store", component: () => import("../views/Store.vue") },
  { path: "/valuetocom", component: () => import("../views/ValueToCom.vue") },

  //   删除了 *（星标或通配符）路由#
  // 现在必须使用自定义的 regex 参数来定义所有路由(*、/*)：
  // 现在不能直接用*来匹配不存在的路由
  { path: "/:pathMatch(.*)*", redirect: "/mock" }, // 不识别的path自动匹配404
];

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
});

export default router;
